<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">数据中心</el-breadcrumb-item>
                <el-breadcrumb-item>非标库</el-breadcrumb-item>
                <el-breadcrumb-item>非标库新增</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="SKU" :model="SKU" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="名称" prop="sku_name">
                            <el-input v-model="SKU.sku_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="品牌" prop="sku_brand">
                            <el-input v-model="SKU.sku_brand"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="单位" prop="sku_unit">
                            <el-select v-model="SKU.sku_unit" filterable placeholder="请选择单位" style="width:100%">
                                <el-option v-for="unit in unitList" :key="unit.unit_name" :label="unit.unit_name" :value="unit.unit_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="规格参数" >
                            <el-input v-model="SKU.sku_slug_set"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="价格" prop="sku_price">
                            <el-input v-model.number="SKU.sku_price"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submit('SKU')">提交</el-button>
                    <a href="/dataCenter/nslIndex.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script >
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading:false,
                rules: {
                    sku_name: [{
                        required: true,
                        message: '请输入SKU名称',
                        trigger: 'blur'
                    }],
                    sku_brand: [{
                        required: true,
                        message: '请输入品牌',
                        trigger: 'blur'
                    }],
                    sku_unit: [{
                        required: true,
                        message: '请选择单位',
                        trigger: 'change'
                    }],
                    sku_price: [{
                        required: true,
                        message: '请输入价格',
                        trigger: 'blur'
                    }, {
                        type: 'number',
                        message: '价格必须为数字值'
                    }],
                },
                dialogVisible: false,
                SKU: {},
                brand: '',
            }
        },
        methods: {
            submit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading=true;
                        this.SKU.requestType = 'add';
                        $.ajax({
                            url: "/dataCenter/nslEdit.json",
                            type: "POST",
                            data: this.SKU,
                            success:  (result) =>{
                                if (result.ret) {
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    setTimeout(function () {
                                        window.location.href="/dataCenter/nslIndex.page";
                                    }, 1000);
                                } else {
                                    this.$message.error("请求失败，请稍后重试");
                                }
                                this.loading=false;
                            }
                        });

                    } else {
                        this.$message({
                            message: '警告，请填写必填字段',
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },
            //获取单位列表
            unitAjax: function () {
                $.ajax({
                    url: '/dataCenter/unitList.json?page=0&limit=0',
                    type: 'get',
                    success: (result) => {
                        if (result.ret) {
                            this.unitList = result.data;
                        } else {
                            this.$message.error('单位列表请求失败，请稍后重试');
                        }
                    }
                });
            },
        },
        mounted: function () {
            this.unitAjax();
        },
    })
</script>

</body>

</html>